import LivePlayer from '@/components/LivePlayer'
import { useRef, useEffect } from 'react'
import styles from './styles.module.scss'
import List from '../News/List'
import dayjs from 'dayjs'
const LiveMobile = ({ liveInfo, mobile }) => {
  const playRef = useRef(null)
  const { newLiveUrl: liveUrl, matchTime } = liveInfo[0]
  useEffect(() => {
    playRef.current?.create();
  }, [liveUrl])
  return (
    <>
      <List.NewsBreadcrumb info={{ text: liveInfo?.[0]?.matchName }} />
      <main className={styles.h5LivePage}>
        <article>
          <section>
            <div>
              <h1>{`${liveInfo?.[0]?.eventName} | ${liveInfo?.[0]?.matchName}`}</h1>
              <i>{liveInfo?.[0]?.fromTime}</i>
            </div>
          </section>
          <LivePlayer ref={playRef} data={liveUrl} matchTime={matchTime} mobile={mobile}></LivePlayer>
          <p>
            <em>直播源:</em>
            <span>鑫球体育</span>
          </p>
        </article>
      </main>
      <aside className={styles.matchInfo}>
        <h2>
          比赛信息
        </h2>
        <p>
          <span>赛事名称：</span>
          <span>{liveInfo?.[0]?.matchName}</span>
        </p>
        <p>
          <span>赛事分类：</span>
          <span>{liveInfo?.[0]?.liveType}</span>
        </p>
        <p>
          <span>赛事名称：</span>
          <span>{liveInfo?.[0]?.eventName}</span>
        </p>
        <p>
          <span>比赛时间：</span>
          <span>{dayjs(liveInfo?.[0]?.matchTime * 1000).format('YYYY-MM-DD HH:mm:ss')}</span>
        </p>
      </aside>
    </>
  )
}


export default LiveMobile